<template>
    <div>
        <tab-bar></tab-bar>
        <div class="swipe-bg">
            <div class="slider-bg"></div>
            <div class="userInfo" @click="editInfo">
                <div class="avatar">
                    <van-image
                        round
                        width="5rem"
                        height="5rem"
                        :src="userInfo.avatar"
                    />
                </div>
               <div class="info">
                   <p class="nickname">{{ userInfo.user_name }}</p>
                   <p class="description">{{ userInfo.sign }}</p>
               </div>
            </div>
            <div class="three-block">
                <div v-for="item in images">
                    <router-link :to="item.link">
                        <van-image
                            round
                            width="3rem"
                            height="3rem"
                            :src="item.url"
                        />
                        <p style="margin: 0;font-size:14px;color: #808080;">{{ item.text }}</p>
                    </router-link>
                </div>
            </div>
        </div>
        <div class="cell-options">
            <van-cell v-for="(item, index) in icons" :key="index" :icon="item.icon" :title="item.text" is-link :to="item.link" />
            <van-cell @click="logout" title="退出登录" is-link icon="clear" />
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { Cell, CellGroup } from 'vant'
import { Image } from 'vant'
import exampleImg from '../assets/img/example.jpg'
import oneImg from '../assets/img/1.png'
import twoImg from '../assets/img/2.png'
import threeImg from '../assets/img/3.png'
import { Toast } from 'vant';
import { Dialog } from 'vant';

Vue.use(Dialog);
Vue.use(Toast);
Vue.use(Image);
Vue.use(Cell).use(CellGroup);
export default {
    name: "mine",
    data() {
        return {
            icons: [
                {'icon': 'like', 'text': '全部订单','link': '/car'},
                {'icon': 'fire', 'text': '关于我们','link': '/about'},
                {'icon': 'gem', 'text': '联系客服','link': '/help'}
            ],
            images: [
                {'text':'平台交易','url': oneImg, 'link': '/complete'},
                {'text':'我的收藏','url': twoImg, 'link': '/collection'},
                {'text':'我的订单','url': threeImg, 'link': '/car'},
            ],
            exampleImg: exampleImg,
            userInfo: JSON.parse(localStorage.getItem('userInfo'))
        }
    },
    methods: {
        logout: function () {
            var _this = this;
            Dialog.confirm({
                title: '退出登录',
                message: '确定要退出登录吗？',
            })
                .then(() => {
                    // on confirm
                    localStorage.removeItem('token');
                    localStorage.removeItem('userInfo');
                    Toast.success('退出登录成功');
                    setTimeout(function () {
                        _this.$router.replace('/')
                    },1200);
                })
                .catch(() => {
                    // on cancel
                });
        },
        editInfo: function () {
            this.$router.push('/userinfo')
        }
    }
}
</script>

<style scoped>
    .login-out{
        width: 100%;
        text-align: center;
    }
    .swipe-bg{
        padding: 0.4rem 0.6rem;
        overflow: hidden;
        position: relative;
        height: 14em;
    }
    .slider-bg{
        background-image: linear-gradient(0deg, #f17102, #f1a42a 50%);
        position: absolute;
        top: 0;
        left: -25%;
        height: 10.25rem;
        width: 150%;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
    }
    .cell-options{
        background: none;
        width: 100%;
    }
    .three-block{
        height: 6rem;
        background: white;
        margin: 2vw;
        margin-top: 6rem;
        z-index: 999;
        position: absolute;
        top: 2rem;
        width: 91vw;
        border-radius: 0.3rem;
        box-shadow: 0px 0px 4px 3px #b1b1b1a1;
    }
    .userInfo{
        display: flex;
        justify-content: flex-start;
    }
    .avatar{
        margin: 1rem;
    }
    .info{
        position: relative;
    }
    .description{
        font-size: 13px;
        color: wheat;
        margin-top: 6px;
    }
    .nickname{
        color: white;
        margin-bottom: 0 !important;
        margin-top: 27px;
    }
    .three-block{
        display: flex;
        justify-content: space-around;
        text-align: center;
        align-items: center;
    }
</style>
